<!--系统登录-->
<template>
  <div id="login">
    <div class="box">
      <div class="logo">
        德盛在线课堂后台管理
      </div>
      <el-tabs v-model="activeTap" @tab-click="handleTab">
        <el-tab-pane label="账号登录" name="pwd">
          <el-form :model="pwdFormData" :rules="pwdRules" ref="pwdForm">
            <el-form-item label prop="loginName">
              <el-input
                v-model.trim="pwdFormData.loginName"
                placeholder="请输入手机/邮箱"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item label prop="loginPwd">
              <el-input
                v-model="pwdFormData.loginPwd"
                placeholder="请输入登录密码"
                type="password"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <!--按钮部分-->
            <el-form-item>
              <el-button type="primary" @click="pwdSubmitForm('pwdForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="短信登录" name="sms">
          <el-form :model="smsFormData" :rules="smsRules" ref="smsForm">
            <el-form-item label prop="loginName">
              <el-input
                v-model.trim="smsFormData.loginName"
                placeholder="请输入手机号"
                maxlength="11"
                prefix-icon="el-icon-mobile-phone"
              ></el-input>
            </el-form-item>
            <el-form-item class="password-input" prop="smsPwd">
              <el-input
                v-model="smsFormData.smsPwd"
                maxlength="6"
                placeholder="请输入短信验证码"
                prefix-icon="el-icon-message"
              >
                <el-button
                  v-if="!this.verification"
                  slot="append"
                  class="verification-code"
                  @click="sendVerificationCode('smsForm')"
                >发送手机验证码</el-button>
                <el-button
                  v-if="this.verification"
                  slot="append"
                  class="verification-code2"
                >{{timer}}秒后重新发送</el-button>
              </el-input>
            </el-form-item>
            <!--按钮部分-->
            <el-form-item>
              <el-button type="primary" @click="smsSubmitForm('smsForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div class="login-ft">
        <span class="fl" v-if="activeTap=='pwd'">
          <el-checkbox v-model="checkpwd">记住密码</el-checkbox>
        </span>
        <span class="fr" @click="forgetPwd">忘记密码?</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getSession, setSession } from '@/utils/index'
export default {
  name: 'login',
  data () {
    let checkphone = (rule, value, callback) => {
      let phoneReg = /^1\d{10}$/;
      if (value === '') {
        callback(new Error('请输入手机号码'));
      } else if (!phoneReg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    }
    return {
      activeTap: 'pwd',
      verification: false,
      timer: 60,
      img: '',
      pwdFormData: {
        //projectId: this.$store.state.user.projectId,

        // loginName: getSession('LOGIN_NAME') ? getSession('LOGIN_NAME') : 'admin',
        // loginPwd: getSession('LOGIN_PWD') ? getSession('LOGIN_PWD') : 'dbn002385',

        loginName:'',
        loginPwd:'',
        // eslint-disable-next-line no-undef
        // ip: returnCitySN.cip
      },
      smsFormData: {
        loginName: '',
        smsPwd: '',
        tempToken: '',
        // eslint-disable-next-line no-undef
        // ip: returnCitySN.cip
      },
      pwdRules: {
        loginName: [
          { required: true, message: '请输入账户/手机/邮箱', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      },
      smsRules: {
        loginName: [
          { required: true, validator: checkphone, trigger: 'blur' }
        ],
        smsPwd: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      redirect: '',
      clickCount: 0,
      checkpwd: getSession('REMENBER_PWD') ? true : false,
    }
  },
  created(){
    //无登录
    // this.$store.dispatch('login', this.pwdFormData).then(() => {
    //   if (getSession('REMENBER_PWD')) {
    //     setSession('LOGIN_NAME', this.pwdFormData.loginName)
    //     setSession('LOGIN_PWD', this.pwdFormData.loginPwd)
    //   }
    //   this.clickCount = 0
    //   this.$router.push({ path: this.redirect || '/' })
    // }).catch(() => {
    //   this.clickCount = 0
    // })
  },
  mounted () {
    let redirect = this.$route.query.redirect || ''
    this.redirect = window.atob(redirect)
  },
  watch: {
    'checkpwd' (val) {
      if (val) {
        localStorage.setItem('REMENBER_PWD', true)
      } else {
        localStorage.removeItem('REMENBER_PWD')
        localStorage.removeItem('LOGIN_NAME')
        localStorage.removeItem('LOGIN_PWD')
      }
    }
  },
  methods: {
    handleTab () {
      console.log(this.activeTap);
      this.clickCount = 0
    },
    forgetPwd () {
      this.$router.push('/resetpwd')
    },
    /* 发送短信验证码 */
    sendVerificationCode (formName) {
      if (this.clickCount) return false
      this.$refs[formName].validateField('loginName', (errMsg) => {
        if (errMsg) {
          this.clickCount = 0
          return false
        } else {
          this.clickCount++
          this.$api.business.sendSms({
            //projectId: this.$store.state.user.projectId,
            loginName: this.smsFormData.loginName
          }).then(res => {
            this.smsFormData.tempToken = res.data.tempToken
            this.$message({
              message: '验证码发送成功',
              type: 'success'
            })
            this.timer = 60
            this.verification = true
            this.clickCount = 0
            let auth_timer = setInterval(() => {  //定时器设置每秒递减
              this.timer--;
              if (this.timer === 0) {
                this.verification = false
                clearInterval(auth_timer)
              }
            }, 1000)
          });
        }
      })
    },
    /* 账号密码登录 */
    pwdSubmitForm (formName) {
      // this.$router.push({ path: this.redirect || '/basicsManage/index' })
      if (this.clickCount) return false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.clickCount++
          this.$store.dispatch('login', this.pwdFormData).then(() => {
            if (getSession('REMENBER_PWD')) {
              setSession('LOGIN_NAME', this.pwdFormData.loginName)
              setSession('LOGIN_PWD', this.pwdFormData.loginPwd)
            }
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            this.clickCount = 0
            this.$router.push({ path: this.redirect || '/basicsManage/index' })
          }).catch(() => {
            this.clickCount = 0
          })
        } else {
          this.clickCount = 0
          return false
        }
      })
    },
    /* 短信登录 */
    smsSubmitForm (formName) {
      if (this.clickCount) return false

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { tempToken, smsPwd, ip } = this.smsFormData
          this.clickCount++
          this.$store.dispatch('smsLogin', {
            //projectId: this.$store.state.user.projectId,
            tempToken,
            smsPwd,
            ip
          }).then(() => {
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            this.clickCount = 0
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.clickCount = 0
          })
        } else {
          this.clickCount = 0
          return false
        }
      })
    },
  }
}
</script>
<style lang="scss">
#login {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #eee;
  .box {
    background: #fff;
    min-width: 400px;
    -ms-flex-item-align: center;
    align-self: center;
    margin: -100px 0 0 0;
    padding: 30px 20px;
    .login-ft {
      height: 20px;
      color: #1890ff;
      .el-checkbox__label {
        color: #888;
      }
      span {
        cursor: pointer;
      }
    }
    .logo {
      color: #1890ff;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 40px;
      // img{
      //   width: 252px;
      //   margin-bottom: 1.5em;
      // }
    }
    .el-tabs__header {
      margin-bottom: 30px;
    }
    .el-tabs__nav {
      width: 100%;
    }
    .el-tabs__item {
      width: 50%;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      font-weight: bold;
    }
    .el-form-item {
      margin-bottom: 22px;
      &:last-child {
        margin-bottom: 10px;
      }
    }
    .el-input__icon {
      font-size: 18px;
      width: 35px;
      &::before {
        position: relative;
        top: 2px;
      }
    }
    .password-input {
      .el-button {
        width: 100%;
        font-size: 14px;
      }
    }
    .verification-code {
      text-align: center;
      color: #fff;
      background: #1890ff;
      width: 150px !important;
      height: 44px;
    }
    .verification-code2 {
      text-align: center;
      color: #fff;
      background: #ccc;
      width: 150px !important;
      height: 44px;
    }
    .el-input {
      position: relative;
      input.el-input__inner {
        height: 44px;
        line-height: 44px;
        padding-left: 40px;
      }
    }
    .el-button {
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>

